<template>
  <div class="profile-container">
    <div class="profile-content">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <!-- 用户信息卡片 -->
        <div class="user-card">
          <div class="gradient-banner">
            <div class="banner-content">
              <div class="user-info">
                <div class="avatar-wrapper">
                  <el-avatar :size="80" :src="userInfo.avatar_url
                    ? `http://localhost:3000${userInfo.avatar_url}`
                    : '/images/default-avatar.png'
                    " @error="() => true">
                    <img src="/images/default-avatar.png" alt="默认头像" />
                  </el-avatar>
                </div>
                <div class="user-details">
                  <div class="user-title">
                    <h2>{{ userInfo.username }}</h2>
                    <div class="user-tags">
                      <el-tag size="small" type="success" effect="light">VIP用户</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section-title">
          <el-icon>
            <Calendar />
          </el-icon>
          <span>快速导航</span>
        </div>
        <el-menu :default-active="activeModule" class="profile-menu" @select="handleMenuSelect">
          <template v-if="userStore.user?.role === 'admin' || userStore.user?.role === 'nurse'">
            <el-menu-item index="settings">
              <el-icon>
                <Setting />
              </el-icon>
              <span>个人设置</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-menu-item index="consultations">
              <el-icon>
                <Calendar />
              </el-icon>
              <span>我的预约</span>
            </el-menu-item>
            <el-menu-item index="events">
              <el-icon>
                <Location />
              </el-icon>
              <span>我的活动</span>
            </el-menu-item>
            <el-menu-item index="courses">
              <el-icon>
                <Reading />
              </el-icon>
              <span>我的课程</span>
            </el-menu-item>
            <el-menu-item index="favorites">
              <el-icon>
                <Star />
              </el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="likes">
              <el-icon>
                <Pointer />
              </el-icon>
              <span>我的点赞</span>
            </el-menu-item>
            <el-menu-item index="settings">
              <el-icon>
                <Setting />
              </el-icon>
              <span>个人设置</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>

      <!-- 右侧主内容区 -->
      <div class="main-content">
        <!-- 数据展示区域 -->
        <div v-if="activeModule === 'consultations'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Calendar />
              </el-icon>
              <span>我的预约</span>
            </h3>
          </div>

          <div class="data-content">
            <div v-if="consultations.length === 0" class="empty-state">暂无预约记录</div>
            <div v-else class="consultation-list">
              <div v-for="consultation in consultations" :key="consultation.id" class="consultation-item"
                @click="showConsultationDetail(consultation)">
                <div class="consultation-main-info">
                  <div class="consultation-type">
                    <span class="type-text">{{
                      getServiceTypeText(consultation.service_type)
                      }}</span>
                    <el-tag :type="getStatusType(consultation.status)" size="small">
                      {{ getStatusText(consultation.status) }}
                    </el-tag>
                  </div>
                  <div class="consultation-brief">
                    <span class="brief-item">
                      <el-icon>
                        <Calendar />
                      </el-icon>
                      {{ formatDateTime(consultation.date, consultation.time) }}
                    </span>
                    <span class="brief-item">
                      <el-icon>
                        <Location />
                      </el-icon>
                      {{ consultation.address }}
                    </span>
                  </div>
                </div>
                <div class="consultation-price">
                  <span class="price-label">总金额：</span>
                  <span class="price-value">¥{{ consultation.total_price }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预约详情模态框 -->
        <el-dialog v-model="consultationDetailVisible" title="预约详情" width="500px" destroy-on-close>
          <div v-if="selectedConsultation" class="consultation-detail">
            <div class="detail-header">
              <h3>{{ getServiceTypeText(selectedConsultation.service_type) }}</h3>
              <el-tag :type="getStatusType(selectedConsultation.status)">
                {{ getStatusText(selectedConsultation.status) }}
              </el-tag>
            </div>

            <div class="detail-content">
              <div class="detail-item">
                <span class="detail-label">就诊时间</span>
                <span class="detail-value">{{
                  formatDateTime(selectedConsultation.date, selectedConsultation.time)
                  }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">就诊地址</span>
                <span class="detail-value">{{ selectedConsultation.address }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">患者姓名</span>
                <span class="detail-value">{{ selectedConsultation.patient_name }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">联系电话</span>
                <span class="detail-value">{{ selectedConsultation.phone }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">服务项目</span>
                <div class="service-tags">
                  <el-tag v-for="service in selectedConsultation.services" :key="service.service_name" size="small"
                    type="info" effect="plain" class="service-tag">
                    {{ service.service_name }} - ¥{{ service.service_price }}
                  </el-tag>
                </div>
              </div>
              <div class="detail-item">
                <span class="detail-label">总金额</span>
                <span class="detail-value price">¥{{ selectedConsultation.total_price }}</span>
              </div>
            </div>
          </div>
        </el-dialog>

        <div v-if="activeModule === 'events'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Location />
              </el-icon>
              <span>我的活动</span>
            </h3>
          </div>

          <div class="data-content">
            <div v-if="events.length === 0" class="empty-state">暂无活动记录</div>
            <div v-else class="grid-list">
              <div v-for="event in events" :key="event.id" class="grid-item"
                @click="goToDetail({ content_type: 'event', content_id: event.id })">
                <div class="item-header">
                  <span class="item-title">{{ event.name }}</span>
                  <el-tag :type="getEventStatusType(event.status)" size="small">
                    {{ getEventStatusText(event.status) }}
                  </el-tag>
                </div>
                <div class="item-brief">
                  <div class="brief-row">
                    <el-icon>
                      <Calendar />
                    </el-icon>
                    <span>{{ formatDateTime(event.date) }}</span>
                  </div>
                  <div class="brief-row">
                    <el-icon>
                      <Location />
                    </el-icon>
                    <span>{{ event.location || '线上活动' }}</span>
                  </div>
                  <div class="brief-row description">
                    {{ truncateText(event.description, 50) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="activeModule === 'courses'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Reading />
              </el-icon>
              <span>我的课程</span>
            </h3>
          </div>

          <div class="data-content">
            <div v-if="courses.length === 0" class="empty-state">暂无课程记录</div>
            <div v-else class="grid-list">
              <div v-for="course in courses" :key="course.id" class="grid-item"
                @click="goToDetail({ content_type: 'course', content_id: course.id })">
                <div class="item-header">
                  <span class="item-title">{{ course.title }}</span>
                </div>
                <div class="item-brief">
                  <div class="brief-row description">
                    {{ truncateText(course.description, 50) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人设置模块 -->
        <div v-if="activeModule === 'settings'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Setting />
              </el-icon>
              <span>个人设置</span>
            </h3>
          </div>

          <div class="data-content">
            <el-card class="settings-card">
              <div class="avatar-container">
                <el-avatar :size="100" :src="userInfo.avatar_url
                  ? `http://localhost:3000${userInfo.avatar_url}`
                  : '/images/default-avatar.png'
                  " @error="() => true" />
                <el-upload class="avatar-uploader" action="/api/users/avatar" :headers="uploadHeaders"
                  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                  :on-error="(err, file) => {
                    console.error('头像上传失败：', err)
                    ElMessage.error('头像上传失败，请重试')
                  }
                    " name="avatar">
                  <el-button size="small" type="primary">更换头像</el-button>
                </el-upload>
              </div>

              <el-form :model="userInfo" label-width="80px">
                <el-form-item label="用户名">
                  <el-input v-model="userInfo.username" disabled />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="userInfo.phone" disabled />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="userInfo.email" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateProfile">保存修改</el-button>
                  <el-button @click="showPasswordDialog">修改密码</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </div>

        <!-- 收藏列表 -->
        <div v-if="activeModule === 'favorites'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Star />
              </el-icon>
              <span>我的收藏</span>
            </h3>
          </div>
          <div class="data-content">
            <div v-if="favorites.length === 0" class="empty-state">暂无收藏内容</div>
            <div v-else class="grid-list">
              <div v-for="item in favorites" :key="item.id" class="grid-item" @click="goToDetail(item)">
                <div class="item-header">
                  <span class="item-title">{{ item.title }}</span>
                  <el-tag size="small" :type="item.content_type === 'course'
                    ? 'success'
                    : item.content_type === 'event'
                      ? 'warning'
                      : 'info'
                    ">
                    {{
                      item.content_type === 'course'
                        ? '课程'
                        : item.content_type === 'event'
                          ? '活动'
                          : '文章'
                    }}
                  </el-tag>
                </div>
                <div class="item-brief">
                  <div class="brief-row description">
                    {{ truncateText(item.description || '暂无描述', 50) }}
                  </div>
                  <div class="brief-row time">
                    <el-icon>
                      <Calendar />
                    </el-icon>
                    <span>{{ formatTime(item.created_at) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 点赞列表 -->
        <div v-if="activeModule === 'likes'" class="data-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon>
                <Pointer />
              </el-icon>
              <span>我的点赞</span>
            </h3>
          </div>
          <div class="data-content">
            <div v-if="likes.length === 0" class="empty-state">暂无点赞内容</div>
            <div v-else class="grid-list">
              <div v-for="item in likes" :key="item.id" class="grid-item" @click="goToDetail(item)">
                <div class="item-header">
                  <span class="item-title">{{ item.title }}</span>
                  <el-tag size="small" :type="item.content_type === 'course'
                    ? 'success'
                    : item.content_type === 'event'
                      ? 'warning'
                      : 'info'
                    ">
                    {{
                      item.content_type === 'course'
                        ? '课程'
                        : item.content_type === 'event'
                          ? '活动'
                          : '文章'
                    }}
                  </el-tag>
                </div>
                <div class="item-brief">
                  <div class="brief-row description">
                    {{ truncateText(item.description || '暂无描述', 50) }}
                  </div>
                  <div class="brief-row time">
                    <el-icon>
                      <Calendar />
                    </el-icon>
                    <span>{{ formatTime(item.created_at) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" v-model="passwordDialog.visible" width="400px">
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="原密码">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="changePassword">确认修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import {
  Calendar,
  Reading,
  Location,
  User,
  Setting,
  Edit,
  Phone,
  Message,
  Star,
  Pointer,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import api from '@/api'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 用户数据
const email = ref(userStore.user?.email || 'user@example.com')

// 当前选中的模块
const activeModule = ref('settings')

// 用户信息相关
const userInfo = ref({
  username: '',
  email: '',
  phone: '',
  avatar_url: '',
})

const uploadHeaders = computed(() => ({
  Authorization: `Bearer ${userStore.token}`,
}))

// 预约记录
const consultations = ref([])
// 活动记录
const events = ref([])
// 课程记录
const courses = ref([])
// 收藏和点赞
const favorites = ref([])
const likes = ref([])

const passwordDialog = ref({
  visible: false,
})

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 获取用户信息
const getUserInfo = async () => {
  try {
    const response = await api.get('/users/profile')
    if (response.data && response.data.avatar_url) {
      // 更新store中的头像
      userStore.updateUserAvatar(response.data.avatar_url)
      // 强制刷新头像
      nextTick(() => {
        const avatars = document.querySelectorAll('.el-avatar')
        avatars.forEach((avatar) => {
          const img = avatar.querySelector('img')
          if (img && response.data.avatar_url) {
            img.src = `http://localhost:3000${response.data.avatar_url}?t=${Date.now()}`
          }
        })
      })
    }
    userInfo.value = response.data || {}
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 获取收藏历史
const getFavorites = async () => {
  try {
    const response = await api.get('/users/favorites')
    favorites.value = response.data.map((item) => ({
      ...item,
    }))
  } catch (error) {
    console.error('获取收藏记录失败:', error)
    favorites.value = []
  }
}

// 获取点赞历史
const getLikes = async () => {
  try {
    const response = await api.get('/users/likes')
    console.log('点赞数据原始响应:', response.data)
    likes.value = response.data.map((item) => {
      console.log('处理单个点赞项:', item)
      // 不再重新映射 title 和 description，因为后端已经提供了这些字段
      const mappedItem = {
        ...item,
      }
      console.log('映射后的点赞项:', mappedItem)
      return mappedItem
    })
    console.log('最终点赞列表:', likes.value)
  } catch (error) {
    console.error('获取点赞记录失败:', error)
    likes.value = []
  }
}

// 更新个人资料
const updateProfile = async () => {
  try {
    await api.put('/users/profile', {
      email: userInfo.value.email,
    })
    ElMessage.success('个人资料更新成功')
  } catch (error) {
    console.error('更新失败:', error)
    ElMessage.error('更新失败')
  }
}

// 修改密码
const changePassword = async () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  try {
    await api.put('/users/change-password', {
      oldPassword: passwordForm.value.oldPassword,
      newPassword: passwordForm.value.newPassword,
    })
    ElMessage.success('密码修改成功')
    passwordDialog.value.visible = false
    passwordForm.value = { oldPassword: '', newPassword: '', confirmPassword: '' }
  } catch (error) {
    console.error('修改密码失败:', error)
    ElMessage.error(error.response?.data?.message || '修改密码失败')
  }
}

// 头像上传相关
const handleAvatarSuccess = (response) => {
  if (response.avatar_url) {
    // 更新用户信息中的头像URL
    userInfo.value.avatar_url = response.avatar_url
    // 更新store中的头像
    userStore.updateUserAvatar(response.avatar_url)

    // 强制刷新所有头像显示
    nextTick(() => {
      console.log('强制刷新头像显示')
      const avatars = document.querySelectorAll('.el-avatar')
      avatars.forEach((avatar) => {
        // 创建新的Image对象来强制刷新
        const newImg = new Image()
        newImg.src = `http://localhost:3000${response.avatar_url}?t=${Date.now()}`
        newImg.onload = () => {
          const img = avatar.querySelector('img')
          if (img) {
            img.src = newImg.src
          }
        }
      })
    })

    ElMessage.success('头像上传成功')
  } else {
    console.error('头像上传响应格式错误：', response)
    ElMessage.error('头像上传失败：响应格式错误')
  }
}

const beforeAvatarUpload = (file) => {
  console.log('准备上传文件：', file)
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('上传头像图片只能是图片格式!')
    console.error('文件格式错误：', file.type)
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
    console.error('文件大小超限：', file.size)
    return false
  }

  return true
}

// 显示修改密码对话框
const showPasswordDialog = () => {
  passwordDialog.value.visible = true
}

// 跳转到详情页
const goToDetail = (item) => {
  let route
  switch (item.content_type) {
    case 'course':
      route = '/course'
      break
    case 'event':
      route = '/event'
      break
    case 'knowledge':
      route = '/knowledge'
      break
    default:
      route = '/'
  }
  router.push(`${route}/${item.content_id}`)
}

// 格式化时间
const formatTime = (time) => {
  return new Date(time).toLocaleString()
}

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeModule.value = index
  console.log('切换到模块:', index)
}

// 格式化日期时间
const formatDateTime = (date, time) => {
  if (!date) return '未设置'
  const dateObj = new Date(date)
  const formattedDate = dateObj.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
  return time ? `${formattedDate} ${time}` : formattedDate
}

// 在 script setup 部分添加 truncateText 函数
const truncateText = (text, length) => {
  if (!text) return ''
  return text.length > length ? text.slice(0, length) + '...' : text
}

onMounted(() => {
  if (!userStore.isLoggedIn) {
    router.push('/login')
    return
  }
  getUserInfo()
  getFavorites()
  getLikes()

  // 根据当前选中的模块加载数据
  if (activeModule.value === 'consultations') {
    fetchConsultations()
  } else if (activeModule.value === 'events') {
    fetchEvents()
  } else if (activeModule.value === 'courses') {
    fetchCourses()
  }
})

// 添加watch以监听模块切换
watch(activeModule, async (newModule) => {
  console.log('模块切换为:', newModule)
  if (newModule === 'consultations') {
    await fetchConsultations()
  } else if (newModule === 'events') {
    await fetchEvents()
  } else if (newModule === 'courses') {
    await fetchCourses()
  } else if (newModule === 'favorites') {
    await getFavorites()
  } else if (newModule === 'likes') {
    await getLikes()
  }
})

// 获取预约记录
const fetchConsultations = async () => {
  try {
    const response = await api.get('/consultations', {
      params: { username: userStore.user?.username },
    })
    consultations.value = response.data || []
  } catch (error) {
    console.error('获取预约记录失败:', error)
    consultations.value = []
  }
}

// 获取活动记录
const fetchEvents = async () => {
  try {
    const response = await api.get('/events/user-events')
    events.value = response.data.map((event) => ({
      ...event,
      status: new Date(event.date) < new Date() ? 'ended' : 'upcoming',
    }))
  } catch (error) {
    console.error('获取活动记录失败:', error)
    events.value = []
  }
}

// 获取课程记录
const fetchCourses = async () => {
  try {
    const response = await api.get('/courses/user-courses')
    courses.value = response.data.map((course) => ({
      ...course,
      progress: course.completed ? 100 : Math.floor(Math.random() * 70 + 10),
    }))
  } catch (error) {
    console.error('获取课程记录失败:', error)
    courses.value = []
  }
}

// 获取活动状态类型
const getEventStatusType = (status) => {
  switch (status) {
    case 'ended':
      return 'info'
    case 'upcoming':
      return 'success'
    default:
      return 'default'
  }
}

// 获取活动状态文本
const getEventStatusText = (status) => {
  switch (status) {
    case 'ended':
      return '已结束'
    case 'upcoming':
      return '即将开始'
    default:
      return '进行中'
  }
}

// 获取服务类型文本
const getServiceTypeText = (type) => {
  const typeMap = {
    basic: '基础问诊套餐',
    premium: '标准问诊套餐',
    vip: 'VIP问诊套餐',
    accompany: '陪同就诊',
    visit: '上门问诊',
    普通陪诊: '普通陪诊套餐',
    专科陪诊: '专科陪诊套餐',
    加急陪诊: '加急陪诊套餐',
  }
  return typeMap[type] || type
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 'pending':
      return 'warning'
    case 'confirmed':
      return 'success'
    case 'completed':
      return 'info'
    case 'cancelled':
      return 'danger'
    default:
      return 'default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending':
      return '待确认'
    case 'confirmed':
      return '已确认'
    case 'completed':
      return '已完成'
    case 'cancelled':
      return '已取消'
    default:
      return '未知状态'
  }
}

// 获取内容类型的样式
const getContentTypeStyle = (type) => {
  switch (type) {
    case 'course':
      return 'success'
    case 'event':
      return 'warning'
    case 'knowledge':
      return 'info'
    default:
      return 'default'
  }
}

// 获取内容类型的文本
const getContentTypeText = (type) => {
  switch (type) {
    case 'course':
      return '课程'
    case 'event':
      return '活动'
    case 'knowledge':
      return '文章'
    default:
      return '未知'
  }
}

// 在 script setup 部分添加
const consultationDetailVisible = ref(false)
const selectedConsultation = ref(null)

const showConsultationDetail = (consultation) => {
  selectedConsultation.value = consultation
  consultationDetailVisible.value = true
}
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background: #fff;
  padding: 20px;
}

.profile-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.sidebar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.profile-menu {
  border: none;
  margin-top: 16px;

  :deep(.el-menu-item) {
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    margin: 4px 0;

    &:hover,
    &.is-active {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }

    .el-icon {
      margin-right: 12px;
    }
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 16px 0 8px;

  .el-icon {
    font-size: 18px;
  }
}

.data-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px;
  transition: all 0.3s ease;
  border: 1px solid var(--el-border-color-lighter);
}

.section-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.section-header .section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.section-header .el-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.history-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--el-border-color-lighter);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--el-color-primary-light-5);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.item-description {
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 1.6;
}

.item-date {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}

.list-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--el-border-color-lighter);
  transition: all 0.3s ease;
  cursor: pointer;
}

.list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--el-color-primary-light-5);
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--el-color-primary-light-9);
  border-radius: 8px;
}

.info-label {
  font-weight: 500;
  color: var(--el-text-color-primary);
  min-width: 80px;
  margin-right: 12px;
}

.info-content {
  flex: 1;
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--el-text-color-secondary);
}

.empty-state .el-icon {
  font-size: 48px;
  color: var(--el-color-info-light-5);
  margin-bottom: 16px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.service-tag {
  border-radius: 4px;
}

@media (max-width: 768px) {
  .history-list {
    grid-template-columns: 1fr;
  }

  .list-item {
    padding: 16px;
  }

  .info-item {
    flex-direction: column;
  }

  .info-label {
    margin-bottom: 4px;
  }
}

.settings-card {
  border: none;
  box-shadow: none;
  background: transparent;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border: none;
}

.avatar-uploader {
  margin-top: 12px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

.history-card {
  margin-top: 20px;
}

.history-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--el-border-color-lighter);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--el-color-primary-light-5);
}

.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-title {
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.item-type {
  margin-left: 8px;
}

.item-date {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.empty-text {
  text-align: center;
  color: #999;
  padding: 20px 0;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 5px;
}

.change-avatar-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 2px 12px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .change-avatar-btn {
  opacity: 1;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.user-contact {
  display: flex;
  gap: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-item .el-icon {
  font-size: 16px;
}

.gradient-banner {
  background: linear-gradient(135deg,
      var(--el-color-primary) 0%,
      var(--el-color-primary-light-3) 100%);
  border-radius: 12px 12px 0 0;
  padding: 24px;
}

.banner-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.platform-info {
  margin-top: 10px;
}

.slogan {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin: 0;
}

.user-tags {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .user-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .user-contact {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .user-title {
    flex-direction: column;
    align-items: center;
  }

  .slogan {
    text-align: center;
  }
}

.user-card {
  margin-bottom: 20px;
}

.user-card .gradient-banner {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.user-card .banner-content {
  padding: 15px;
}

.user-card .user-info {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.user-card .user-contact {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.user-card .user-title {
  flex-direction: column;
  align-items: center;
}

.user-card .slogan {
  text-align: center;
  font-size: 12px;
}

.user-card .platform-info {
  margin-top: 5px;
}

.avatar-uploader {
  display: block;
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  display: block;
  text-align: center;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.data-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  padding: 20px;
}

@media (max-width: 768px) {
  .profile-content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    top: 0;
  }
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-radius: 6px;
  background: var(--el-bg-color-page);
  transition: all 0.3s;
}

.history-item:hover {
  background: var(--el-color-primary-light-9);
  transform: translateX(4px);
}

.list-item {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.3s ease;
}

.list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-box-shadow);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.item-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.info-item {
  margin-bottom: 8px;
  color: var(--el-text-color-regular);
}

.info-label {
  font-weight: 500;
  margin-right: 8px;
  color: var(--el-text-color-secondary);
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--el-text-color-secondary);
  font-size: 16px;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.item-description {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consultation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.consultation-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  cursor: pointer;
  transition: all 0.3s ease;
}

.consultation-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--el-color-primary-light-5);
}

.consultation-main-info {
  flex: 1;
}

.consultation-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.type-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.consultation-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.brief-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brief-item .el-icon {
  font-size: 16px;
  color: var(--el-text-color-secondary);
}

.consultation-price {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
  text-align: right;
}

.price-label {
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.price-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-color-danger);
  margin-left: 8px;
}

.consultation-detail {
  padding: 0 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.detail-value {
  font-size: 15px;
  color: var(--el-text-color-primary);
}

.detail-value.price {
  color: var(--el-color-danger);
  font-weight: 500;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.grid-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  cursor: pointer;
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--el-color-primary-light-5);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  flex: 1;
  margin-right: 12px;
}

.item-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brief-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.brief-row.description {
  color: var(--el-text-color-secondary);
}

.brief-row.time {
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.brief-row .el-icon {
  font-size: 16px;
  color: var(--el-text-color-secondary);
}

@media (max-width: 768px) {
  .grid-list {
    grid-template-columns: 1fr;
  }
}
</style>
